<template>
  <view class="x-select-input" @click="handleClick" :style="{minHeight: height}">
    <view style="display:flex; flex-wrap: wrap;" v-if="list.length">
      <view v-for="(item, index) in list" class="tag" :key="index" @click.stop="() => {}">
        <view>
          {{ item[label] }}
        </view>
        <u-icon v-if="!disabled"
                class="close"
                name="close-circle"
                color="#CBC4CC"
                size="28"
                @click.stop.native="onInviterCloseClick(item)"/>
      </view>
    </view>
    <view v-else :style="placeholderStyle">{{placeholder}}</view>
    <u-icon style="margin-right: 0"
          v-if="!disabled"
          :name="rightIconName"
          :color="arrowIcon.color"
          :size="arrowIcon.size"/>
  </view>
</template>

<script>
export default {
  name: 'select-input',
  props: {
    rightIconName: {
      type: String,
      default: 'arrow-down-fill'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    placeholderStyle: {
      type: Object,
      default: () => {
        return {
          fontSize: '32rpx',
          color: '#c0c4cc'
        };
      }
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    label: {
      type: String,
      default: 'label'
    },
    value: {
      type: String,
      default: 'value'
    },
    arrowIcon: {
      type: Object,
      default: () => {
        return {
          color: '#c0c4cc',
          size: 28
        };
      }
    },
    list: Array,
    height: {
      type: String,
      default: '70rpx'
    }
  },
  data() {
    return {};
  },
  methods: {
    handleClick() {
      if (this.disabled) return;
      this.$emit('click');
    },
    onInviterCloseClick(item) {
      if (this.disabled) return;
      const list = this.list.filter(d => {
        return d[this.value] !== item[this.value];
      });
      this.$emit('clear', list);
    }
  }
};
</script>

<style scoped lang="scss">
.x-select-input{
  width: 100%;
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .tag {
    display: flex;
    background: #f1f0f7;
    margin-left: 10rpx;
    border-radius: 8rpx;
    padding: 0 6rpx;
    margin-top: 10rpx;
    height: 60rpx;
    line-height: 60rpx;

    .close{
      position: relative;
      top: -8rpx;
      padding-left: 10rpx;
      z-index: 1;
    }
  }
}

</style>
